<template>
  <div class="box">
    <header>
      <div>
        <span class="iconfont icon-fangdajing"> </span>
        <input type="text" v-model="searchRecord" />
      </div>
      <p @click="addSearchRecord">搜索</p>
    </header>
    <div class="shuaxin">
      <p>搜索历史</p>
      <span class="iconfont icon-shanchu" @click="delSearchRecord"></span>
    </div>
    <div class="tishi">
      <p v-for="(phones, index) in searchRecords" :key="index">
        {{ phones.name }}
      </p>
    </div>
    <div class="shuaxin">
      <p>搜索发现</p>
      <span class="iconfont icon-xunhuan1"></span>
    </div>
    <div class="tishi">
      <p v-for="(phones, index) in phone" :key="index">{{ phones }}</p>
    </div>
    <div class="re-sou">
      <img src="./img/resou.jpg" alt="" />
      <div class="sesou-son">
        <p v-for="(phones, index) in hotBot" :key="index">
          <img :src="phones.img" alt="" />
          <i>{{ phones.name }} <span>新</span></i>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "sousuo",
  components: {},
  methods: {},
  data() {
    return {
      phone: [],
      hotBot: [],
      searchRecord: "Xiaomi 12",
      searchRecords: [],
      types: true,
      str: [],
    };
  },
  created() {
    axios.all([axios.get("/sousuo"), axios.get("/hotBot")]).then(
      axios.spread((books, readers) => {
        //所有请求完毕后，调用该函数，books是第一个请求的结果，readers是第二个请求的结果
        this.phone = books.data;
        this.hotBot = readers.data;
      })
    );

    axios({
      url: "/searchRecord?_page=1&_limit=6",
    }).then((res) => {
      this.searchRecords = res.data;
      console.log(this.searchRecords);
    });
  },
  methods: {
    addSearchRecord() {
      axios({
        url: "/searchRecord",
      }).then((res) => {
        this.str = res.data;
        console.log(res.data);
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].name == this.searchRecord) {
            this.types = false;
          } else {
            this.types = true;
          }
        }
        console.log(this.types);
        if (this.types && this.searchRecord != "") {
          axios({
            method: "post",
            url: "/searchRecord",
            data: {
              name: this.searchRecord,
              page: "dal",
            },
          }).then((res) => {
            console.log("搜索记录添加成功");
          });
        }
      });
    },
    delSearchRecord() {
      for (let j = 0; j < this.str.length; j++) {
        axios({
          method: "delete",
          url: "/searchRecord/"+this.str[j].id,
        }).then((res) => {
          console.log("删除成功");
          this.searchRecords = [];
        });
      }
    },
  },
};
</script>

<style scoped>
@import url(../gonggongwenjian/xiaomi-iconfont/iconfont.css);
header {
  height: 0.3rem;
  width: 3.55rem;
  margin: 0.2rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header div {
  width: 3.2rem;
  height: 100%;
  line-height: 0.3rem;
  background-color: #ebebeb;
  border-radius: 0.16rem;
}
header div input {
  width: 2.5rem;
  background-color: #ebebeb;
  border-radius: 0.16rem;
  color: #888888;
  margin-left: 0.1rem;
}
header div .iconfont {
  margin-left: 0.1rem;
  color: #888888;
}
header p {
  font-size: 0.14rem;
}
.shuaxin {
  height: 0.3rem;
  width: 3.55rem;
  margin: 0.2rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.14rem;
}
.shuaxin .iconfont {
  font-weight: 700;
  font-size: 0.2rem;
}
.tishi {
  width: 3.55rem;
  margin: 0.2rem auto;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.tishi p {
  height: 0.27rem;
  font-size: 0.12rem;
  padding: 0 0.12rem;
  line-height: 0.27rem;
  border-radius: 0.13rem;
  background-color: #e8e8e8;
  margin-right: 0.1rem;
  margin-bottom: 0.1rem;
}
.re-sou {
  width: 3.55rem;
  margin: 0.2rem auto;
}
.re-sou img {
  width: 3.55rem;
}
.re-sou .sesou-son {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: #f8f8f8;
}
.re-sou .sesou-son p {
  height: 0.38rem;
  width: 1.55rem;
  margin-bottom: 0.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.re-sou .sesou-son p i {
  font-size: 0.12rem;
  margin-left: 0.05rem;
}
.re-sou .sesou-son p i span {
  color: #f16200;
  background-color: #f9e6dd;
}
.re-sou .sesou-son p img {
  height: 100%;
  width: auto;
}
</style>
